<template>
  <div class="bindShopBox">
    <div class="bindShop">
      <!-- <h2>请提供您店铺后台截图
        <a>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              查看示例
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in shopTypeArr" :key="index" :command="item.command">{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </a>
      </h2>
      <div class="upload">
        <ImageUpload :imgList="imgList" max="1" bigSize></ImageUpload>
      </div>
      <div class="inputs">
        <h3>请您填写您的联系方式</h3>
        <el-input class="inp" v-model="phone" placeholder="请输入手机号码"></el-input>
        <el-input class="inp" v-model="name" placeholder="请输入称呼"></el-input>
      </div> -->
      <div class="inputs">
        <h3>为了为您提供更优质的服务，请填写您店铺所属的类目</h3>
        <el-select @change="firstChange" v-model="firstClassItem" value-key="id" class="inp" placeholder="请选择一级类目">
          <el-option v-for="(item, index) in firstList" :key="index" :label="item.className" :value="item">
          </el-option>
        </el-select>
        <el-select v-model="secondClassItem" value-key="id" class="inp" placeholder="请选择二级类目">
          <el-option v-for="(item, index) in secondList" :key="index" :label="item.className" :value="item">
          </el-option>
        </el-select>
      </div>
      <div class="footer">
        <span @click="$router.push({name: 'userCenter'})">跳过</span>
        <b class="button-s" @click="sureClassBind">确认</b>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import ImageUpload from '../base/imgUpload/index'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'bindShop',
  components: {
    ImageUpload
  },
  data () {
    return {
      imgList: [],
      firstClassItem: '',
      secondClassItem: '',
      firstList: [],
      secondList: [],
      phone: '',
      name: '',
      shopTypeArr: [
        {
          name: '淘宝',
          command: 0,
          url: require('@/assets/images/taobaoBack.png')
        },
        {
          name: '京东',
          command: 1,
          url: require('@/assets/images/jingdongBack.png')
        },
        {
          name: '拼多多',
          command: 2,
          url: require('@/assets/images/pinduoduoBack.png')
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'sellerInfo'
    ])
  },
  methods: {
    handleCommand (command) { // 下拉点击
      this.$lookImg.show(this.shopTypeArr[command].url)
    },
    sureBindTest () {
      if (this.imgList.length === 0) {
        this.$message({
          message: '请上传店铺后台截图',
          type: 'warning'
        })
      } else if (this.phone === '') {
        this.$message({
          message: '请填写联系手机号',
          type: 'warning'
        })
      } else if (this.name === '') {
        this.$message({
          message: '请填写联系人姓名',
          type: 'warning'
        })
      } else {
        this.sureBind()
      }
    },
    sureBind () {
      this.$ajax.post('/api/seller/account/sellerBindShop', {
        sellerAccountId: this.userInfo.sellerAccountId,
        shopPics: this.imgList[0] || '',
        telephone: this.phone,
        name: this.name
      }).then((data) => {
        if (data.data.code === '200') {
          this.$message({
            message: '绑定成功',
            type: 'success'
          })
          this.refreshUserInfo()
          this.$router.push({ name: 'userCenter' })
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    sureClassBind () {
      if (this.firstClassItem === '') {
        this.$message({
          message: '请选择一级类目',
          type: 'warning'
        })
      } else if (this.secondClassItem === '') {
        this.$message({
          message: '请选择二级类目',
          type: 'warning'
        })
      } else {
        this.$ajax.post('/api/seller/account/sellerBindShop', {
          sellerAccountId: this.userInfo.sellerAccountId,
          firstClass: this.firstClassItem.id,
          firstClassDetail: this.firstClassItem.className,
          secondClass: this.secondClassItem.id,
          secondClassDetail: this.secondClassItem.className
        }).then((res) => {
          if (res.data.code === '200') {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$router.push({ name: 'userCenter' })
          }
        })
      }
    },
    refreshUserInfo () {
      this.$ajax.post('/api/seller/account/getSellerInfoBySellerAccountId', {
        sellerAccountId: this.userInfo.sellerAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          this.setSellerInfo(data.data.data)
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    fillInfo () {
      if (this.sellerInfo.shopPics) {
        this.imgList = [this.sellerInfo.shopPics]
        this.phone = this.sellerInfo.shopConcatTelephone
        this.name = this.sellerInfo.shopConcatName
      } else if (parseInt(this.userInfo.shopBindStatus) === 1) {
        this.imgList = [this.userInfo.shopPics]
        this.phone = this.userInfo.shopConcatTelephone
        this.name = this.userInfo.shopConcatName
      }
    },
    fillClass () {
      if (this.sellerInfo.firstClass) {
        this.firstClassItem = {
          id: this.sellerInfo.firstClass || '',
          className: this.sellerInfo.firstClassDetail || ''
        }
        this.getSecond(this.sellerInfo.firstClass, 1)
      }
    },
    firstChange (val) {
      this.getSecond(val.id)
    },
    getFirst () {
      this.$ajax.post('/api/config/productClass/getFirstClassList', {

      }).then((res) => {
        if (res.data.code === '200') {
          this.firstList = res.data.data
        }
      })
    },
    getSecond (firstClass, isRget) {
      if (firstClass) {
        this.$ajax.post('/api/config/productClass/getSecondClassList', {
          firstClass: firstClass
        }).then((res) => {
          if (res.data.code === '200') {
            this.secondList = res.data.data
            if (isRget) {
              this.secondClassItem = {
                id: this.sellerInfo.secondClass || '',
                className: this.sellerInfo.secondClassDetail || ''
              }
            }
          }
        })
      } else {
        this.$message({
          message: '请选择一级类目',
          type: 'warning'
        })
      }
    },
    ...mapActions([
      'setSellerInfo'
    ])
  },
  mounted () {
    // this.fillInfo()
    // this.fillClass()
    this.getFirst()
    this.fillClass()
  },
  created () {
    // this.getFirst()
    // this.fillClass()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.bindShopBox
  width 100%
  height 100%
  background #999999
  .bindShop
    width 500px
    margin 100px auto
    padding 40px 30px
    text-align center
    background #ffffff
    h2
      position relative
      font-size 24px
      // font-weight bold
      a
        position absolute
        right 50px
        bottom 0
        text-decoration none
        font-size 14px
      .el-dropdown-link
        cursor pointer
        color skyblue
    .upload
      display flex
      justify-content center
      margin-top 20px
    .inputs
      margin-top 20px
      h3
        font-size 16px
        color #ff3341
        margin-bottom 20px
        // font-weight bold
      .inp
        margin-top 10px
        width 400px
    .footer
      margin-top 40px
      span
        cursor pointer
        margin-right 20px
</style>
